Les Tableaux (CSS)
Retour sur les Tableaux en XHTML
Nous allons désormais voir les propriétés CSS associées aux tableaux
Dessiner des bordures en CSS
On dispose de plusieurs propriétés CSS pour créer des bordures :
- border-style : détermine le type de bordure (bordure pleine, en pointillés, en tirets, effet 3D...) ;
- border-width : détermine l'épaisseur de la bordure ;
- border-color : détermine la couleur de la bordure :
Petite remarque : Les bordures ne s'appliquent pas qu'aux tableaux. Ils peuvent s'appliquer aussi à de nombreux autres éléments : <p>, <strong>, <blockquote>, <h1> ... L'on peut ainsi encadrer des paragraphes de textes, des titres, des citations ...
Type de bordure
La propriété border-style indique le type de bordure que l'on veut utiliser. Elle peut prendre de nombreuses valeurs :
Les différents types de bordure disponibles :
| Aperçu | Valeur | Description |
|---|---|---|
| Solid | solid | Ligne pleine |
| Double | double | Ligne double |
| Dashed | dashed | Ligne en tirets |
| Dotted | dotted | Ligne en pointillés |
| Inset | inset | Effet 3D "enfoncé" |
| Outset | outset | Effet 3D "surélevé" |
| Ridge | ridge | Autre type d'effet 3D |
| none | Pas de bordure (valeur par défaut) |
Remarque : Certains type de bordures nécessitent une certaine épaisseur pour que l'on puisse voir leur effet. Ainsi il faut au moins 3 pixels de largeur pour pouvoir voir une bordure double, et 2 pixels pour pouvoir voir les effets 3D inset, outset et ridge.
Nous allons maintenant appliquer une bordure pleine à notre tableau d'origine : Voir le code XHTML du tableau
table
{
border-style: solid;
}
On a crée ainsi une bordure autour du tableau.
Epaisseur de bordure
La propriété border-width sert à modifier l'épaisseur de la bordure. L'unité utilisée est généralement le px (pixel).
Si l'on veut créer une bordure plus fine(1px) pour notre tableau, on doit écrire le code suivant :
table
{
border-style: solid;
border-width: 1px;
}
La bordure apparait bien plus fine qu'auparavant. En outre, n'oubliez pas que 1px est la taille minimale pour une bordure on ne peut pas faire plus fin !
La couleur de la bordure
Pour modifier la couleur de la bordure, utilisez la propriété border-color. Elle s'utilise de la même manière que color et background-color. On peut utiliser des noms de couleur comme valeur, ou utiliser une notation hexadécimale ou RGB.
Grâce à cette propriété, on décide de mettre la bordure en bleu :
table
{
border-style: solid;
border-width: 1px;
border-color: blue;
}
Remarque : la super-propriété border
A l'image de la super propritété background, la super-propriété border peut regrouper les valeurs de plusieurs propriétés. Plus précisement la valeur des 3 propriétés que l'on vient d'aborder, à savoir :
- border-style
- border-width
- border-color
Si on veut créer une bordure rouge en pointillés d'épaisseur 2px, on peut écrire tout simplement :
table
{
border: 2px dotted red;
}
Il faut se souvenir que l'ordre des valeurs d'une super-propriété n'a pas d'importance et qu'il est possible d'omettre certaines valeurs.
De plus, il faut savoir qu'il est possible d'affecter une bordure différente à chacun des 4 cotés d'un objet. En effet border s'applique aux 4 côtés, mais si l'on veut changer la bordure en fonction du côté, l'on peut avoir recours à ces 4 autres super-propriétés :
- border-left: bordure de gauche ;
- border-right: bordure de droite ;
- border-top: bordure du haut ;
- border-bottom: bordure du bas ;
On veut par exemple que la bordure du gauche soit : rouge de 1px et en ligne pleine, celle de droite : bleu de 2px et en tirets, celle du haut : vert clair de 3px et en ligne pleine et celle du bas : orange de 3px et en ligne pointillés. Voici le code :
table
{
border-left: 1px solid red;
border-right: 2px dashed blue;
border-top: 3px solid lime;
border-bottom: 3px dotted orange;
}
Encadrer les cellules d'une bordure
Pour le moment, nous avons appliqué une bordure seulement autour du tableau. Si nous voulons aussi encadrer les cellules, il faut aussi appliquer border aux balises <td> :
table, td
/* le style doit s'appliquer aux balises <table> et <td> */
{
border: 1px solid black;
}
Toutefois, le résultat n'est pas vraiment celui que l'on attendait...
Pourtant si on réfléchit bien, le navigateur a fait ce qu'on lui a demandé : il a encadré le tableau et les cellules. Le problème c'est que ce n'est pas comme cela que l'on présente un tableau d'habitude. Pour corriger, on utilise la propriété CSS border-collapse (propriété qui ne s'applique qu'aux tableaux) et on lui affecte la valeur collapse.
Ce qui nous donne le code CSS suivant :
table, td
{
border: 1px solid black;
border-collapse: collapse;
}
Grâce à border-collapse, la présentation du tableau est enfin correcte.
Changer la position du titre d'un tableau
On a vu que le titre se placer en haut d'un tableau en XHTML( Exemple). Si l'on souhaite changer la position du titre, il faut faire appel à la propriété CSS caption-side :
- left : Le titre sera placé à gauche du tableau;
- right : Le titre sera placé à droite du tableau;
- bottom : Le titre sera placé en bas du tableau;
- top : Le titre sera placé en haut du tableau (par défaut).
Par exemple, si l'on souhaite placer le titre sous le tableau, il faudra écrire le code suivant :
caption
{
caption-side: bottom;
}
Le titre s'affiche désormais sous le tableau.